import Button from '../Button'
import './style.less'
import { Menu } from 'ant-design-vue'
const { Item } = Menu
export default {
  name: 'ActionButtons',
  props: {
    /**
     * 设定一个数值，当按钮超过该数量之后，自动收到【更多】下拉里面。
     * 默认为0，表示全部展开。
     */
    limit: {
      type: Number,
      default: 0
    },
    /**
     * 按钮配置项组成的数组
     * 按钮配置项为对象，包含以下属性
     * text [String] 按钮文字
     * visible [Boolean,Function] 可直接传true，false，也可传入一个function，该function要返回一个Boolean结果，为True时按钮可见。
     * click [Function] 单击事件
     * confirm [String] 设定一段文本，点击按钮后，会弹框二次确认，确认之后才会触发click事件。
     */
    buttons: {
      type: Array,
      default: () => []
    },
    isBody: {
      type: Boolean,
      default: true
    },
    /**
     * 是否显示分割线
     */
    showDivider: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    renderButtons () {
      let limit = this.limit
      // 计算出当前需要展示的按钮
      const visibleButtons = []
      // 正常展示的按钮
      const normalButtons = []
      // 需要放到 更多 里面的按钮
      const moreButtons = []

      // 先提取出当前需要渲染的按钮
      for (const button of this.buttons) {
        // 如果设置了visible
        if (Reflect.has(button, 'visible')) {
          const { visible } = button
          if (visible === false) continue

          if (visible instanceof Function) {
            if (visible() === false) continue
          }
        }
        visibleButtons.push(button)
      }

      // 分组

      /**
       * 假如limit=3，刚好渲染的按钮数量=3，那更多是不需要的
       * 假如渲染按钮=4，那么，只会渲染前面两个按钮，后面的都在更多
       */
      if (limit === 0 || visibleButtons.length <= limit) {
        normalButtons.push(...visibleButtons)
      } else {
        visibleButtons.forEach((button, index) => {
          if (index < limit - 1) normalButtons.push(button)
          else moreButtons.push(button)
        })
      }

      //  构造渲染列表
      let renders = []
      for (const button of normalButtons) {
        renders.push(this.renderButton(button))
      }
      if (moreButtons.length) {
        renders.push(this.renderMoreButtons(moreButtons))
      }

      // 如果需要显示分割线
      if (this.showDivider) {
        renders = renders.reduce((list, render) => {
          list.push(render, this.renderDivider())
          return list
        }, [])
        renders.pop()
      }

      return renders
    },
    renderButton (button) {
      const onClick = () => {
        if (button.click) {
          button.click()
        }
      }
      return <Button type="link" size="small" icon={button.icon} confirm={button.confirm} onClick={onClick}>{button.text}</Button>
    },
    renderMoreButtons (buttons) {
      return (
        <a-dropdown getPopupContainer={this.getPopupContainer}>
          <Button type="link" size="small">更多<a-icon type="down" /></Button>
          <Menu slot="overlay">
            {buttons.map(button => this.renderMoreButton(button))}
          </Menu>
        </a-dropdown>
      )
    },
    renderMoreButton (button) {
      return (
        <Item onClick={() => this.ItemClick(button)}>
          {button.text}
        </Item>
      )
    },
    ItemClick (button) {
      if (button.confirm) {
        this.$dialog(`<div>${button.confirm}</div>`, {
          width: 300,
          move: true,
          title: '提示',
          ons: {
            onOK: () => {
              return new Promise(resolve => {
                button.click()
                resolve(true)
              })
            }
          }
        })
      } else {
        button.click()
      }
    },
    renderDivider () {
      return (
        <a-divider type="vertical"></a-divider>
      )
    },
    getPopupContainer (el) {
      return this.isBody ? document.body : el.parentNode
    }
  },
  render () {
    return (
      <div class="action-buttons">
        {
          this.showDivider ? this.renderButtons() : <a-space>{this.renderButtons()}</a-space>
        }
      </div>
    )
  }
}
